<template>
	<view class="container">
		<swiper class="banner" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
			<swiper-item v-for="(item, index) in banner" :key="index">
				<navigator v-if="item.link" :url="item.link">
					<image :src="item.imageUrl" background-size="cover"></image>
				</navigator>
				<image v-else :src="item.imageUrl" background-size="cover"></image>
			</swiper-item>
		</swiper>
		<!-- 		<view class="a-section a-topic" v-if="channel.length > 0">
          <view class="m-menu">
            <navigator class="item" v-for="(item, index) in channel" :key="index" :url="item.url">
              <image :src="item.iconUrl" background-size="cover"></image>
              <text>{{item.name}}</text>
            </navigator>
          </view>
        </view> -->

		<!-- 		<view class="a-section a-topic" v-if="brands.length > 0">
          <view class="a-section a-brand">
            <view class="h">
              <navigator url="/pages/brand/brand">
                <text class="txt">品牌制造商直供</text>
              </navigator>
            </view>
          </view>
          <view class="b">
            <scroll-view scroll-x="true" class="list">
              <view class="item" v-for="(item, index) in brands" :key="index">
                <navigator :url="'/pages/brandDetail/brandDetail?id='+item.id">
                  <image class="img" :src="item.newPicUrl" background-size="cover"></image>
                  <view class="np">
                    <text class="name">{{item.name}}</text>
                    <text class="price">￥{{item.floorPrice}}元起</text>
                  </view>
                  <text class="desc">{{item.simpleDesc}}</text>
                </navigator>
              </view>
            </scroll-view>
          </view>
        </view> -->
		<!--
        <view class="a-section a-topic" v-if="topics.length > 0">
          <view class="a-section a-brand">
            <view class="h">
              <navigator open-type="switchTab" url="/pages/topic/topic">
                <text class="txt">专题精选</text>
              </navigator>
            </view>
          </view>
          <view class="b">
            <scroll-view scroll-x="true" class="list">
              <view class="item" v-for="(item, index) in topics" :key="index">
                <navigator :url="'/pages/topicDetail/topicDetail?id='+item.id">
                  <image class="img" :src="item.scenePicUrl" background-size="cover"></image>
                  <view class="np">
                    <text class="name">{{item.title}}</text>
                    <text class="price">￥{{item.priceInfo}}元起</text>
                  </view>
                  <text class="desc">{{item.subtitle}}</text>
                </navigator>
              </view>
            </scroll-view>
          </view>
        </view> -->

		<view class="hd-divider"></view>
		<view class="a-section a-new" v-if="newGoods.length > 0">
			<view class="h" style="margin-top: 30rpx">
				<view>
					<navigator url="../newGoods/newGoods">
						<text class="txt">新品首发</text>
					</navigator>
				</view>
			</view>
			<view class="b">
				<view class="item" v-for="(item, index) in newGoods" :key="index">
					<navigator :url="'/pages/goods/goods?id='+item.id">
						<image class="img" :src="item.listPicUrl" background-size="cover"></image>
						<text class="name">{{ item.name }}</text>
						<text class="price">￥{{ item.retailPrice }}</text>
					</navigator>
				</view>
			</view>
		</view>

		<!-- <view class="a-section a-popular" v-if="hotGoods.length > 0">
      <view class="h">
        <view>
          <navigator url="../hotGoods/hotGoods">
            <text class="txt">人气推荐</text>
          </navigator>
        </view>
      </view>
      <view class="b">
        <view class="item" v-for="(item, index) in hotGoods" :key="index">
          <navigator :url="'/pages/goods/goods?id='+item.id">
            <image class="img" :src="item.listPicUrl" background-size="cover"></image>
            <view class="right">
              <view class="text">
                <text class="name">{{ item.name }}</text>
                <text class="desc">{{ item.goodsBrief }}</text>
                <text class="price">￥{{ item.retailPrice }}</text>
              </view>
            </view>
          </navigator>
        </view>
      </view>
    </view> -->

		<!--    <view class="good-grid" v-for="(item, index) in floorGoods" :key="index">
      <view class="h">
        <view>
          <text>{{ item.name }}</text>
        </view>
      </view>
      <view class="b">
        <view class="item" v-for="(iitem, iindex) in item.goodsList" :key="iindex">
          <view :class="'item ' + iindex % 2 == 0 ? '' : 'item-b'">
            <navigator :url="'/pages/goods/goods?id='+item.id">
              <image class="img" :src="iitem.listPicUrl" background-size="cover"></image>
              <text class="name">{{ iitem.name }}</text>
              <text class="price">￥{{ iitem.retailPrice }}</text>
            </navigator>
          </view>
        </view>
        <view class="item item-b item-more">
          <navigator :url="'/pages/category/category?id='+item.id" class="more-a">
            <view class="txt">{{ '更多' + item.name + '好物' }}</view>
            <image class="icon" src="../../static/images/icon_go_more.png" background-size="cover"></image>
          </navigator>
        </view>
      </view>
    </view> -->
	</view>
</template>

<script>
	const api = require('@/utils/api.js');
	const util = require("@/utils/util.js")
	export default {
		data() {
			return {
				newGoods: [],
				hotGoods: [],
				topics: [],
				brands: [],
				floorGoods: [],
				banner: [],
				channel: []
			}
		},
		methods: {
			getIndexData: function() {
				let that = this;
				util.request(api.IndexUrlNewGoods).then(function(res) {
					if (res.errno === 0) {
						that.newGoods = res.data.newGoodsList
					}
				});
				// util.request(api.IndexUrlHotGoods).then(function (res) {
				//   if (res.errno === 0) {
				//     that.hotGoods = res.data.hotGoodsList
				//   }
				// });
				// util.request(api.IndexUrlTopic).then(function (res) {
				//   if (res.errno === 0) {
				//     that.topics = res.data.topicList
				//   }
				// });
				// util.request(api.IndexUrlBrand).then(function (res) {
				//   if (res.errno === 0) {
				//     that.brands = res.data.brandList
				//   }
				// });
				// util.request(api.IndexUrlCategory).then(function (res) {
				//   if (res.errno === 0) {
				//     that.floorGoods = res.data.categoryList
				//   }
				// });
				util.request(api.IndexUrlBanner).then(function(res) {
					if (res.errno === 0) {
						that.banner = res.data.banner
					}
				});
				// util.request(api.IndexUrlChannel).then(function (res) {
				//   if (res.errno === 0) {
				//     that.channel = res.data.channel
				//   }
				// });

			},
		},
		// 增加下拉刷新数据的功能
		onPullDownRefresh() {
			this.getIndexData();
		},
		onShareAppMessage: function() {
			return {
				title: '数字服装科技',
				path: '/pages/index/index'
			}
		},
		onLoad: function() {
			uni.login({
				success: (resp) => {
					util.request(api.Code + resp.code, {}, 'GET').then(function(res) {
						if (res.errno === 0) {
							//存储用户信息
							uni.setStorageSync('userInfo', res.data.userInfo);
							uni.setStorageSync('token', res.data.token);
							uni.setStorageSync('userId', res.data.userId);
						} else {
							uni.showModal({
								title: '提示',
								content: res.errmsg,
								showCancel: false
							});
						}
					});
				},
			})
			this.getIndexData();
		}
	}
</script>

<style lang="scss">
	.banner {
		width: 750 rpx;
		height: 417 rpx;
	}

	.banner image {
		width: 100%;
		height: 417 rpx;
	}

	.m-menu {
		display: flex;
		height: 181 rpx;
		width: 750 rpx;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		background-color: #fff;
	}

	.m-menu .item {
		flex: 1;
		display: block;
		padding: 20 rpx 0;
	}

	.m-menu image {
		display: block;
		width: 58 rpx;
		height: 58 rpx;
		margin: 0 auto;
		margin-bottom: 12 rpx;
	}

	.m-menu text {
		display: block;
		font-size: 24 rpx;
		text-align: center;
		margin: 0 auto;
		line-height: 1;
		color: #333;
	}

	.a-section {
		width: 750 rpx;
		height: auto;
		overflow: hidden;
		background: #fff;
		color: #333;
		margin-top: 20 rpx;
	}

	.a-section .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 130 rpx;
	}

	.a-section .h .txt {
		padding-right: 30 rpx;
		background-size: 16.656 rpx 27 rpx;
		display: inline-block;
		height: 36 rpx;
		font-size: 33 rpx;
		line-height: 36 rpx;
	}

	.a-brand .b {
		width: 750 rpx;
		height: auto;
		overflow: hidden;
		position: relative;
	}

	.a-brand .wrap {
		position: relative;
	}

	.a-brand .img {
		position: absolute;
		left: 0;
		top: 0;
	}

	.a-brand .mt {
		position: absolute;
		z-index: 2;
		padding: 27 rpx 31 rpx;
		left: 0;
		top: 0;
	}

	.a-brand .mt .brand {
		display: block;
		font-size: 33 rpx;
		height: 43 rpx;
		color: #333;
	}

	.a-brand .mt .price,
	.a-brand .mt .unit {
		font-size: 25 rpx;
		color: #999;
	}

	.a-brand .item-1 {
		float: left;
		width: 375 rpx;
		height: 252 rpx;
		overflow: hidden;
		border-top: 1 rpx solid #fff;
		margin-left: 1 rpx;
	}

	.a-brand .item-1:nth-child(2n+1) {
		margin-left: 0;
		width: 374 rpx;
	}

	.a-brand .item-1 .img {
		width: 375 rpx;
		height: 253 rpx;
	}

	.a-new .b {
		width: 750 rpx;
		height: auto;
		overflow: hidden;
		padding: 0 31 rpx 45 rpx 31 rpx;
	}

	.a-new .b .item {
		// float: left;
		// width: 302 rpx;
		// margin-top: 10 rpx;
		// margin-left: 21 rpx;
		// margin-right: 21 rpx;
		width: 100%;
		text-align: center;
	}

	.a-new .b .item-b {
		margin-left: 42 rpx;
	}

	.a-new .b .img {
		width: 302 rpx;
		height: 302 rpx;
	}

	.a-new .b .name {
		text-align: center;
		display: block;
		width: 302 rpx;
		height: 35 rpx;
		margin-bottom: 14 rpx;
		overflow: hidden;
		font-size: 30 rpx;
		color: #333;
	}

	.a-new .b .price {
		display: block;
		text-align: center;
		line-height: 30 rpx;
		font-size: 30 rpx;
		color: #b4282d;
	}

	.a-popular {
		width: 750 rpx;
		height: auto;
		overflow: hidden;
	}

	.a-popular .b .item {
		border-top: 1px solid #d9d9d9;
		margin: 0 20 rpx;
		height: 264 rpx;
		width: 710 rpx;
	}

	.a-popular .b .img {
		margin-top: 12 rpx;
		margin-right: 12 rpx;
		float: left;
		width: 240 rpx;
		height: 240 rpx;
	}

	.a-popular .b .right {
		float: left;
		height: 264 rpx;
		width: 456 rpx;
		display: flex;
		flex-flow: row nowrap;
	}

	.a-popular .b .text {
		display: flex;
		flex-wrap: nowrap;
		flex-direction: column;
		justify-content: center;
		overflow: hidden;
		height: 264 rpx;
		width: 456 rpx;
	}

	.a-popular .b .name {
		width: 456 rpx;
		display: block;
		color: #333;
		line-height: 50 rpx;
		font-size: 30 rpx;
	}

	.a-popular .b .desc {
		width: 456 rpx;
		display: block;
		color: #999;
		line-height: 50 rpx;
		font-size: 25 rpx;
	}

	.a-popular .b .price {
		width: 456 rpx;
		display: block;
		color: #b4282d;
		line-height: 50 rpx;
		font-size: 33 rpx;
	}

	.a-topic .b {
		height: 533 rpx;
		width: 750 rpx;
		padding: 0 0 48 rpx 0;
	}

	.a-topic .b .list {
		height: 533 rpx;
		width: 750 rpx;
		white-space: nowrap;
	}

	.a-topic .b .item {
		display: inline-block;
		height: 533 rpx;
		width: 680.5 rpx;
		margin-left: 30 rpx;
		overflow: hidden;
	}

	.a-topic .b .item:last-child {
		margin-right: 30 rpx;
	}

	.a-topic .b .img {
		height: 387.5 rpx;
		width: 680.5 rpx;
		margin-bottom: 30 rpx;
	}

	.a-topic .b .np {
		height: 35 rpx;
		margin-bottom: 13.5 rpx;
		color: #333;
		font-size: 30 rpx;
	}

	.a-topic .b .np .price {
		margin-left: 20.8 rpx;
		color: #b4282d;
	}

	.a-topic .b .desc {
		display: block;
		height: 30 rpx;
		color: #999;
		font-size: 24 rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.good-grid {
		width: 750 rpx;
		height: auto;
		overflow: hidden;
	}

	.good-grid .h {
		display: flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: center;
		height: 130 rpx;
		font-size: 33 rpx;
		color: #333;
	}

	.good-grid .b {
		width: 750 rpx;
		padding: 0 6.25 rpx;
		height: auto;
		overflow: hidden;
	}

	.good-grid .b .item {
		float: left;
		background: #fff;
		width: 365 rpx;
		margin-bottom: 6.25 rpx;
		height: 452 rpx;
		overflow: hidden;
		text-align: center;
	}

	.good-grid .b .item .a {
		height: 452 rpx;
		width: 100%;
	}

	.good-grid .b .item-b {
		margin-left: 6.25 rpx;
	}

	.good-grid .item .img {
		margin-top: 20 rpx;
		width: 302 rpx;
		height: 302 rpx;
	}

	.good-grid .item .name {
		display: block;
		width: 365.625 rpx;
		padding: 0 20 rpx;
		overflow: hidden;
		height: 35 rpx;
		margin: 11.5 rpx 0 22 rpx 0;
		text-align: center;
		font-size: 30 rpx;
		color: #333;
	}

	.good-grid .item .price {
		display: block;
		width: 365.625 rpx;
		height: 30 rpx;
		text-align: center;
		font-size: 30 rpx;
		color: #b4282d;
	}

	.good-grid .more-item {
		height: 100%;
		width: 100%;
	}

	.more-a {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.good-grid .more-a .txt {
		height: 33 rpx;
		width: 100%;
		line-height: 33 rpx;
		color: #333;
		font-size: 33 rpx;
	}

	.good-grid .more-a .icon {
		margin: 60 rpx auto 0 auto;
		width: 70 rpx;
		height: 70 rpx;
	}

	.hd-divider {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 10rpx 0;
		border-style: solid;
		border-width: 0
	}
</style>